<template>
	<comp-navbar title="仪式详情" bgColor="#fff" :fixed="true" :z-index="999999" border></comp-navbar>
	<view class="detail_wrap">
		<view class="title">{{detailInfo.Ceremonytheme}}</view>
		<view class="com_item flex">
			<view class="label">开始时间：</view>
			<view class="info">{{dayjs(detailInfo.StartTime).format('YYYY-MM-DD HH:mm')}}</view>
		</view>
		<view class="com_item flex">
			<view class="label">展厅名称：</view>
			<view class="info">{{detailInfo.ExhibitionhallName}}</view>
		</view>
		<view class="info_wrap">
			<view class="info_t flex_betweent">
				<view class="com_item flex">
					<view class="label">销售姓名：</view>
					<view class="info">{{detailInfo.Creator}}</view>
				</view>
				<view class="com_item flex">
					<view class="label">客户姓名：</view>
					<view class="info">{{detailInfo.CustomerName}}</view>
				</view>
				<view class="com_item flex">
					<view class="label">客户电话：</view>
					<view class="info">{{detailInfo.CustomerPhone}}</view>
				</view>
			</view>
			<view class="info_t flex_betweent" v-for="(item,index) in deceasedInfo" :key="index">
				<view class="com_item flex">
					<view class="label">逝者姓名：</view>
					<view class="info">{{item.Name}}</view>
				</view>
				<view class="com_item flex">
					<view class="label">逝者性别：</view>
					<view class="info">{{item.Sex == 0 ? '男': '女'}}</view>
				</view>
			</view>
		</view>

		<view class="info_wrap" v-if="stepInfo.length">
			<view class="com_item flex">
				<view class="label">仪式步骤</view>
			</view>
			<view class="com_item flex" v-for="(item,index) in stepInfo" :key="index">
				<view class="label">仪式环节{{index+1}}：</view>
				<view class="info">{{item.ProcessName}}</view>
			</view>
			<!-- <view class="com_item flex">
				<view class="label">仪式环节二：</view>
				<view class="info">仪式环节流程名称2</view>
			</view> -->
		</view>

		<view class="btn_wrap flex">
			<view class="btn" @click="jumppage()">编辑</view>
			<view :class="{'btn':true,'disable':!stepInfo.length}" @click="handleProject">开始投影</view>
			<view class="btn" @click="handleopen">邀请函</view>
		</view>
	</view>

	<!-- 生成海报分享 -->
	<up-popup :show="show" @close="handleclose" mode="top" overlayOpacity="0.8" bgColor="transparent"
		:overlayStyle="{backdropFilter:'blur(10px)'}" :closeable="true">
		<view class="poster_wrap">
			<PosterComp :config="handleconfig" :id="ysid" ref="posterRef" />
			<view class="poster_btn" @click="handlePoster">
				生成海报
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref,
		onMounted,
		unref
	} from 'vue';
	import {
		request,
		baseUrl
	} from '@/utils/request.js'
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import PosterComp from './poster.vue'
	import dayjs from 'dayjs';

	const detailInfo = ref({})
	const deceasedInfo = ref([])
	const stepInfo = ref([])
	const ysid = ref('')
	const zid = ref('')
	const copyLink = ref('') //http://124.221.137.201:8081/view?cid=25&tid=1013
	const posterRef = ref()

	const show = ref(false)

	const handleclose = () => {
		show.value = false
	}

	const handleopen = () => {
		show.value = true
	}

	const handleconfig = {
		handleclose,
		handleopen,
	}


	const setTempletefn = async (cid, zid) => {
		if (!stepInfo.value.length) return false;
		const tid = stepInfo.value[0].ID
		const res = await request({
			method: 'GET',
			url: '/SZ_CeremonyTemplate/SetTemplateID',
			data: {
				ChannelExhibitionHallID: zid,
				CeremonyOrdersID: cid,
				TemplateID: tid
			}
		})
		return true
	}



	const getExhibitionhall = async (id) => {
		try {

			const res = await request({
				method: 'GET',
				url: '/SZ_CeremonyTemplate/GetCeremonyTemplateList',
				data: {
					ID: id
				}
			})
			const newData = res.Data;
			stepInfo.value = newData;
			console.log('newData', newData)

		} catch (e) {
			//TODO handle the exception
		}
	}



	// 流程详情
	const getTemplate = async (data) => {

		const res = await request({
			url: '/SZ_CeremonyTemplate/GetCeremonyTemplateID',
			method: 'GET',
			data
		})
		stepInfo.value = res.Data
		console.log('getTemplate', res)

	}

	const getDetail = async (data) => {
		const res = await request({
			url: '/SZ_CeremonyOrders/GetCeremonyOrdersListID',
			method: 'GET',
			data
		})
		detailInfo.value = res.Data[0];
		deceasedInfo.value = res.DataTwo
		zid.value = res.Data[0]?.ChannelExhibitionHallID
	}

	const jumppage = (url = `/pages/yishi/addys?type=1&id=${ysid.value}`) => {
		uni.navigateTo({
			url
		})
	}

	// 投影
	const handleProject = async () => {
		const r = await setTempletefn(ysid.value, zid.value)
		// if (r) {
		// 	copyLink.value = `${baseUrl}/view?cid=${ysid.value}&tid=${stepInfo.value[0].ID}`
		// }
		if (!r) {
			uni.$u.toast('请设置投影场景')
			return
		}
		jumppage('/pages/yishi/step?id=' + ysid.value + '&tid=' + stepInfo.value[0].ID + '&zids=' + zid.value)
	}
	const handleCopy = () => {
		uni.setClipboardData({
			data: copyLink.value,
			success: function() {
				uni.$u.toast('复制成功');
			}
		});
	}

	const handlePoster = () => {
		console.log('posterRef', posterRef.value.handleGenerate)
		posterRef.value.handleGenerate && posterRef.value.handleGenerate()
	}

	onLoad((opt) => {
		getDetail({
			ID: opt.id
		})


		getExhibitionhall(opt.id)

		ysid.value = opt.id

	})
</script>

<style lang="scss" scoped>
	.detail_wrap {
		padding: 120rpx 20rpx 60rpx 20rpx;

		.title {
			padding: 0 0 40rpx 0;
			text-align: center;
			font-size: 34rpx;
			color: #000;
			font-weight: bold;
		}

		.com_item {
			margin-bottom: 40rpx;
			font-size: 30rpx;

			.info {
				color: $base-color;
			}
		}

		.info_wrap {
			margin-bottom: 30rpx;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 20rpx;
			font-size: 30rpx;
			border: 1rpx solid $bor-color;
			border-radius: 10rpx;

			.info_t {
				flex-wrap: wrap;
			}
		}

		.btn_wrap {
			justify-content: space-between;

			.btn {
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				text-align: center;
				color: #fff;
				background-color: $act-color;
				border-radius: 6rpx;

				&.disable {
					background-color: $bor-color;
				}
			}
		}

		.my_poster {
			position: relative;
			text-align: center;
		}

		.icon-cc-close-circle {
			position: fixed;
			bottom: 20rpx;
			font-size: 40rpx;
			color: #666;
			z-index: 999999;
		}

		.copy_wrap {
			padding: 20rpx 0;
			align-items: center;

			.copy_img {
				margin-left: auto;
				width: 40rpx;
				height: 40rpx;
			}

			.link {
				flex: 1;
				color: blue;
			}
		}



	}

	.poster_wrap {
		position: relative;


	}

	:deep(.uicon-close) {
		color: #fff !important;
	}

	.poster_btn {
		position: absolute;
		left: 50%;
		bottom: 200rpx;
		width: 500rpx;
		height: 104rpx;
		margin-left: -250rpx;
		line-height: 104rpx;
		font-size: 28rpx;
		color: rgb(0, 127, 167);
		text-align: center;
		background-color: #fff;
		border-radius: 60rpx;
		z-index: 99;
	}
</style>